<!--
  @description 商品分类管理
  @author cjs
  @date 2021-07-17 09:33:40
-->
<template>
	<div class="app_container">
		<div class="baseBorderRadius baseBoderShadow bgWhite">
			<select-element :search-list="searchList"
			  :search-data="searchData"
			  :init-search-data="initSearchData"
			  :search-obj="searchObj"
			  @search="searchFunc"
			  @reset="resetFunc">
				<template v-slot:zzjgId="{ scope }">
					<select-depart v-model="scope.zzjgId" />
				</template>
			</select-element>

			<div class="handle_wrap">
				<el-button type="primary"
				  @click="addFunc">新 增</el-button>
			</div>
			<div class="table_wrap">
				<div class="table_box">
					<c-table :has-check="false"
					  :thead-data="theadData"
					  :table-data="tableData"
					  :is-one-line="false"
					  border>
						<template v-slot:img="{ scope }">
							<div class="icon-wrap">
								<img v-if="scope.row.icon"
								  :src="scope.row.icon"
								  @click="previewIcon(scope.row)"
								  class="icon-img" />
							</div>
						</template>
						<template v-slot:remark="{ scope }">
							<div class="remark-wrap">
								{{ scope.row.remark }}
							</div>
						</template>
						<template v-slot:ope="{ scope }">
							<div>
								<el-link type="primary"
								  size="mini"
								  round
								  @click="editRowFunc(scope.row)">编辑</el-link>
								<el-link type="warning"
								  size="mini"
								  round
								  @click="deleteRowFunc(scope.row)">删除</el-link>
								<el-dropdown @command="handleCommand(scope.row, ...arguments)">
									<span class="el-dropdown-link">
										规格
										<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item command="a">规格维护</el-dropdown-item>
										<el-dropdown-item command="b">规格互斥设置</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</template>
					</c-table>
				</div>
				<div class="page_box">
					<el-pagination v-show="totalSize"
					  background
					  :current-page="currentPage"
					  :page-size="pageSize"
					  layout="total, prev, pager, next, jumper"
					  :total="totalSize"
					  @size-change="handleSizeChange"
					  @current-change="handleCurrentChange"></el-pagination>
				</div>
			</div>
		</div>
		<!-- 新增/编辑弹出层 -->
		<el-dialog title="维护商品"
		  :visible.sync="dialogVisible"
		  width="800px">
			<div>
				<el-form ref="form_ref"
				  :model="formData"
				  :rules="rules"
				  label-width="100px"
				  label-position="right">
					<el-form-item label="商品名称"
					  prop="productName">
						<el-input v-model="formData.productName"
						  v-blurTrim
						  placeholder="请输入" />
					</el-form-item>
					<el-form-item label="单价"
					  prop="price">
						<el-input v-model="formData.price"
						  v-blurTrim
						  type="number"
						  placeholder="请输入" />
					</el-form-item>
					<el-form-item label="商品图标"
					  prop="icon">
						<el-input v-model="formData.icon"
						  v-blurTrim
						  placeholder="请输入" />
					</el-form-item>
					<el-form-item label="商品介绍"
					  prop="remark">
						<el-input v-model="formData.remark"
						  v-blurTrim
						  type="textarea"
						  placeholder="请输入"
						  :rows="4" />
					</el-form-item>
					<el-form-item label="是否上架"
					  prop="status">
						<div class="special_switch_wrap">
							<el-switch v-model="formData.status"
							  active-color="#13ce66"
							  inactive-color="#ff4949"
							  active-text="是"
							  inactive-text="否"
							  :active-value="1"
							  :inactive-value="0">
							</el-switch>
						</div>
					</el-form-item>
					<el-form-item label="标签信息"
					  prop="coldProductTag">
						<template v-if="formData.coldProductTag.length === 0">
							<el-button type="primary"
							  size="mini"
							  round
							  @click="addNewTagFunc">新增标签</el-button>
						</template>
						<template v-else>
							<el-table :data="formData.coldProductTag"
							  border>
								<el-table-column label="序号"
								  width="60px"
								  align="center">
									<template slot-scope="scope">
										{{ scope.$index + 1 }}
									</template>
								</el-table-column>
								<el-table-column label="标签名称">
									<template slot-scope="scope">
										<el-input v-model="scope.row.tagName"
										  v-blurTrim
										  placeholder="请输入" />
									</template>
								</el-table-column>
								<el-table-column label="是否星标"
								  align="center"
								  width="100px">
									<template slot-scope="scope">
										<div class="special_switch_wrap">
											<el-switch v-model="scope.row.isHighlight"
											  active-color="#13ce66"
											  inactive-color="#ff4949"
											  active-text="是"
											  inactive-text="否"
											  :active-value="1"
											  :inactive-value="0">
											</el-switch>
										</div>
									</template>
								</el-table-column>
								<el-table-column label="操作"
								  align="center"
								  width="150px">
									<template slot-scope="scope">
										<el-button type="primary"
										  size="mini"
										  round
										  @click="addNewTagFunc">新增</el-button>
										<el-button type="warning"
										  size="mini"
										  round
										  @click="deleteTagFunc(scope.$index)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</template>

					</el-form-item>
					<el-form-item label="轮播图信息"
					  prop="coldProductImg">
						<template v-if="formData.coldProductImg.length === 0">
							<el-button type="primary"
							  size="mini"
							  round
							  @click="addNewImgFunc">新增标签</el-button>
						</template>
						<template v-else>
							<el-table :data="formData.coldProductImg"
							  border>
								<el-table-column label="序号"
								  align="center"
								  width="60px">
									<template slot-scope="scope">
										{{ scope.$index + 1 }}
									</template>
								</el-table-column>
								<el-table-column label="图片地址">
									<template slot-scope="scope">
										<el-input v-model="scope.row.imgPath"
										  v-blurTrim
										  placeholder="请输入" />
									</template>
								</el-table-column>
								<el-table-column label="操作"
								  align="center"
								  width="150px">
									<template slot-scope="scope">
										<el-button type="primary"
										  size="mini"
										  round
										  @click="addNewImgFunc">新增</el-button>
										<el-button type="warning"
										  size="mini"
										  round
										  @click="deleteImgFunc(scope.$index)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</template>
					</el-form-item>
				</el-form>
			</div>
			<div class="dialog-footer">
				<el-button type="primary"
				  @click="saveFunc">保存</el-button>
				<el-button @click="cancelFunc">取消</el-button>
			</div>
		</el-dialog>
		<!-- 预览 -->
		<div style="width: 0;height: 0;font-size: 0;"
		  v-if="srcList.length">
			<el-image ref="image_ref"
			  :src="srcList[0]"
			  :preview-src-list="srcList"></el-image>
		</div>
		<!-- 设置规则详细信息 -->
		<el-dialog title="规则详情"
		  :visible.sync="dialogParameterDetail"
		  width="600px">
			<div>
				<div>
					<el-button type="primary"
					  @click="addParameterDetail">添 加</el-button>
				</div>
				<el-table :data="parameterDetail"
				  border>
					<el-table-column label="序号"
					  align="center"
					  width="60px">
						<template slot-scope="scope">
							{{ scope.$index + 1 }}
						</template>
					</el-table-column>
					<el-table-column label="名称">
						<template slot-scope="scope">
							<el-input v-model="scope.row.name"
							  v-blurTrim
							  placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="价格">
						<template slot-scope="scope">
							<el-input v-model="scope.row.price"
							  v-blurTrim
							  type="number"
							  placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="是否星标">
						<template slot-scope="scope">
							<div class="special_switch_wrap">
								<el-switch v-model="scope.row.isStar"
								  active-color="#13ce66"
								  inactive-color="#ff4949"
								  active-text="是"
								  inactive-text="否"
								  :active-value="1"
								  :inactive-value="0">
								</el-switch>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作"
					  align="center"
					  width="150px">
						<template slot-scope="scope">
							<el-button type="warning"
							  size="mini"
							  round
							  @click="deleteParameterDetailFunc(scope.$index)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="dialog-footer">
				<el-button type="primary"
				  @click="parameterDetailSureFunc">确 定</el-button>
				<el-button @click="dialogParameterDetail = false">取消</el-button>
			</div>
		</el-dialog>
		<!-- 设置规格互斥信息 -->
		<el-dialog :visible.sync="dialogParameter"
		  title="规格互斥设置"
		  width="800px">
			<div class="parameter-wrap">
				<div class="parameter-left parameter-item">
					<el-tree :data="parameterData"
					  default-expand-all
					  node-key="id"
					  ref="tree"
					  highlight-current
					  @node-click="nodeClick"
					  :props="defaultProps">
					</el-tree>
				</div>
				<div class="parameter-right parameter-item">
					<el-checkbox-group v-model="checkList"
					  @change="changeCheckFunc"
					  v-if="showTree">
						<el-tree :data="parameterData"
						  default-expand-all
						  node-key="id"
						  ref="tree"
						  :props="defaultProps">
							<template slot-scope="{ node, data }">
								<div v-if="node.level > 1">
									<el-checkbox :label="data.id">{{data.name}}</el-checkbox>
								</div>
								<div v-else>
									{{node.level}}
									<span>{{data.name}}</span>
								</div>
							</template>
						</el-tree>
					</el-checkbox-group>
				</div>
			</div>
			<div style="text-align: center;padding-top: 20px;">
				<el-button type="primary"
				  @click="saveParameterExclude">保存</el-button>
			</div>
		</el-dialog>
		<!-- 维护规格 -->
		<el-dialog :visible.sync="dialogParameterSetting"
		  title="商品规格维护"
		  width="800px">
			<div style="padding-bottom: 10px;">
				<el-button type="primary"
				  size="mini"
				  round
				  @click="addNewParameterFunc">新增标签</el-button>
			</div>
			<el-table :data="coldProductParameter"
			  border>
				<el-table-column label="序号"
				  align="center"
				  width="60px">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column label="规则名称">
					<template slot-scope="scope">
						<el-input v-model="scope.row.title"
						  v-blurTrim
						  placeholder="请输入" />
					</template>
				</el-table-column>
				<el-table-column label="价格">
					<template slot-scope="scope">
						<el-input v-model="scope.row.price"
						  v-blurTrim
						  type="number"
						  placeholder="请输入" />
					</template>
				</el-table-column>
				<el-table-column label="是否星标">
					<template slot-scope="scope">
						<div class="special_switch_wrap">
							<el-switch v-model="scope.row.isStar"
							  active-color="#13ce66"
							  inactive-color="#ff4949"
							  active-text="是"
							  inactive-text="否"
							  :active-value="1"
							  :inactive-value="0">
							</el-switch>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="规格详细设置">
					<template slot-scope="scope">
						<el-link type="primary"
						  @click="setParameterDetail(scope.$index)">设置</el-link>
					</template>
				</el-table-column>
				<el-table-column label="操作"
				  align="center"
				  width="150px">
					<template slot-scope="scope">
						<el-button type="primary"
						  size="mini"
						  round
						  @click="addNewParameterFunc">新增</el-button>
						<el-button type="warning"
						  size="mini"
						  round
						  @click="deleteParameterFunc(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
      <div style="padding-top: 20px;text-align: center;">
        <el-button type="primary" @click="saveParameter">保 存</el-button>
        <el-button @click="dialogParameterSetting = false">取 消</el-button>
      </div>
		</el-dialog>
	</div>
</template>
<script>
import Table from "@/components/table/table.vue";
import SelectElement from "@/views/cold-drink/select-element.vue";
import SelectDepart from "@/views/cold-drink/select-depart.vue";
import {
  page,
  removeById,
  saveProduct,
  selectById,
  updateById,
  saveParameterRule,
  // saveParameter,
  updateParameterById
} from "@/api/product/product.js";
import { list } from "@/api/product/product-type.js";
export default {
  components: {
    "c-table": Table,
    "select-element": SelectElement,
    "select-depart": SelectDepart
  },
  data() {
    return {
      searchData: {
        productName: "",
        zzjgId: "",
        categoryId: "",
        status: ""
      },
      oldSearchData: {},
      initSearchData: {},
      // 查询列表
      searchList: [
        { label: "商品名称", element: "el-input", code: "productName" },
        // {
        //   label: "所属商家",
        //   element: "el-cascader",
        //   code: "zzjgId",
        //   slotName: "zzjgId"
        // },
        { label: "商品分类", element: "el-select", code: "categoryId" },
        { label: "是否上架", element: "el-select", code: "status" }
      ],
      searchObj: {
        categoryId: [],
        status: [{ label: "是", value: 1 }, { label: "否", value: 0 }]
      },
      theadData: [
        { name: "序号", code: "index", width: 60 },
        { name: "商品名称", code: "name" },
        { name: "单价", code: "price" },
        { name: "商品图标", code: "icon", slotName: "img" },
        { name: "商品介绍", code: "remark", slotName: "remark", align: "left" },
        { name: "是否上架", code: "statusTxt" },
        { name: "操作", code: "ope", slotName: "ope", width: 160 }
      ],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      // 新增商品分类的弹出层
      dialogVisible: false,
      initFormData: {},
      formData: {
        zzjgId: "",
        productName: "",
        price: "",
        icon: "",
        remark: "",
        status: 1,
        coldProductTag: [
          // { tagName: "", isHighlight: 0 }
        ],
        coldProductImg: [
          // { imgPath: "" }
        ]
        // coldProductParameter: [
        //   // {
        //   //   title: "",
        //   //   price: "",
        //   //   isStar: 0,
        //   //   coldProductParameterDetail: [
        //   //     { name: "", isStar: 0, price: "",excludeIds: "" }
        //   //   ]
        //   // }
        // ]
      },
      rules: {
        productName: [
          { required: true, message: "商品名称不能为空" },
          { max: 32, message: "商品名称不能多于32个字符" }
        ],
        icon: [{ required: true, message: "商品图标不能为空" }]
      },
      editId: null,
      srcList: [],
      dialogParameterDetail: false,
      parameterDetail: [],
      parameterIndex: null,
      defaultProps: {
        label: "name"
      },
      dialogParameter: false,
      checkList: [],
      showTree: false,
      excludeIdsObj: {},
      detailId: null,
      // 某个商品规格信息
      coldProductParameter: [],
      // 规格设置信息
      dialogParameterSetting: false
    };
  },
  created() {
    this.oldSearchData = {
      ...this.searchData
    };
    this.initSearchData = {
      ...this.searchData
    };
    this.initFormData = {
      ...this.formData
    };
  },
  mounted() {
    this.getAllData();
  },
  methods: {
    /**
     * @name saveParameter
     * @description 保存规格
     * @param {}
     * @author cjs
     * @date 2021-07-31 11:21:37
     */
    async saveParameter() {
      // updateParameterById
      const { coldProductParameter, editId: productId } = this;
      const param = {
        productId,
        coldProductParameter
      };
      await updateParameterById(param);
      this.$message({
        message: "保存成功",
        type: "success"
      });
      this.dialogParameterSetting = false;
    },
    /**
     * @name handleCommand
     * @description 规格
     * @param {}
     * @author cjs
     * @date 2021-07-31 11:12:00
     */
    handleCommand(row, val) {
      if (val === "a") {
        this.editParameter(row);
      } else {
        this.parameterSetting(row);
      }
    },
    /**
     * @name editParameter
     * @description 设置规格
     * @param {}
     * @author cjs
     * @date 2021-07-31 11:13:45
     */
    async editParameter(row) {
      this.editId = row.id;
      this.coldProductParameter = [];
      const res = await selectById({
        productId: row.id
      });
      let data = res.data.coldProductParameter || [];
      this.coldProductParameter = data;
      this.dialogParameterSetting = true;
    },
    async saveParameterExclude() {
      // saveParameterRule
      let list = [];
      for (let key in this.excludeIdsObj) {
        list.push({
          parameterDetailId: key,
          excludeIds: this.excludeIdsObj[key].join(",")
        });
      }
      await saveParameterRule(list);
      this.$message({
        type: "success",
        message: "规则设置成功"
      });
    },
    changeCheckFunc(val) {
      this.excludeIdsObj[this.detailId] = [...val];
    },
    nodeClick(data, node) {
      if (node.level === 1) {
        this.showTree = false;
        return;
      }
      this.showTree = true;
      this.checkList = [...(this.excludeIdsObj[data.id] || [])];
      this.detailId = data.id;
    },
    async parameterSetting(row) {
      this.editId = row.id;
      this.excludeIdsObj = {};
      const res = await selectById({
        productId: row.id
      });
      let data = res.data.coldProductParameter || [];
      let list = [];
      data.map(item => {
        const children = item.coldProductParameterDetail || [];
        children.map(vo => {
          this.excludeIdsObj[vo.id] = vo.excludeIds
            ? vo.excludeIds.split(",")
            : [];
        });
        list.push({
          id: String(item.id),
          name: item.title,
          children: children.map(vo => {
            // console.log(vo)
            // vo.id = String(vo.id);
            return {
              id: String(vo.id),
              name: vo.name
            };
          })
        });
      });

      this.parameterData = list;
      this.showTree = false;
      this.dialogParameter = true;
    },
    /**
     * @name parameterDetailSureFunc
     * @description 设置规则详细信息确定方法
     * @param {}
     * @author cjs
     * @date 2021-07-17 15:48:45
     */
    parameterDetailSureFunc() {
      this.coldProductParameter[
        this.parameterIndex
      ].coldProductParameterDetail = this.parameterDetail;
      this.dialogParameterDetail = false;
    },
    /**
     * @name addParameterDetail
     * @description 添加规格详情
     * @param {}
     * @author cjs
     * @date 2021-07-17 15:45:54
     */
    addParameterDetail() {
      this.parameterDetail.push({
        name: "",
        isStar: 0,
        price: "",
        excludeIds: ""
      });
    },
    /**
     * @name deleteParameterDetailFunc
     * @description 删除规格详情
     * @param {}
     * @author cjs
     * @date 2021-07-17 15:46:38
     */
    deleteParameterDetailFunc(index) {
      this.parameterDetail.splice(index, 1);
    },
    /**
     * @name setParameterDetail
     * @description 设置规则详细信息
     * @param {}
     * @author cjs
     * @date 2021-07-17 15:40:32
     */
    setParameterDetail(index) {
      this.parameterIndex = index;
      this.parameterDetail = JSON.parse(
        JSON.stringify(
          this.coldProductParameter[index].coldProductParameterDetail
        )
      );
      this.dialogParameterDetail = true;
    },
    /**
     * @name previewIcon
     * @description 预览商品图片
     * @param {}
     * @author cjs
     * @date 2021-07-17 15:17:58
     */
    async previewIcon(row) {
      this.srcList = [row.icon];
      await this.$nextTick();
      this.$refs.image_ref.clickHandler();
    },
    /**
     * @name addNewParameterFunc
     * @description 添加新的规则
     * @param {}
     * @author cjs
     * @date 2021-07-17 14:41:49
     */
    addNewParameterFunc() {
      this.coldProductParameter.push({
        title: "",
        price: "",
        isStar: 0,
        coldProductParameterDetail: [
          // { name: "", isStar: 0, price: "",excludeIds: "" }
        ]
      });
    },
    /**
     * @name deleteParameterFunc
     * @description 删除规则
     * @param {}
     * @author cjs
     * @date 2021-07-17 14:51:10
     */
    deleteParameterFunc(index) {
      this.coldProductParameter.splice(index, 1);
    },
    /**
     * @name addNewImgFunc
     * @description 添加新的轮播图
     * @param {}
     * @author cjs
     * @date 2021-07-17 14:41:49
     */
    addNewImgFunc() {
      this.formData.coldProductImg.push({
        imgPath: ""
      });
    },
    /**
     * @name deleteImgFunc
     * @description 删除轮播图
     * @param {}
     * @author cjs
     * @date 2021-07-17 14:51:10
     */
    deleteImgFunc(index) {
      this.formData.coldProductImg.splice(index, 1);
    },
    /**
     * @name addNewTagFunc
     * @description 添加新的标签
     * @param {}
     * @author cjs
     * @date 2021-07-17 14:41:49
     */
    addNewTagFunc() {
      this.formData.coldProductTag.push({
        tagName: "",
        isHighlight: 0
      });
    },
    /**
     * @name deleteTagFunc
     * @description 删除
     * @param {}
     * @author cjs
     * @date 2021-07-17 14:51:10
     */
    deleteTagFunc(index) {
      this.formData.coldProductTag.splice(index, 1);
    },
    /**
     * @name getCategoryList
     * @description 获取商品分类列表
     * @param {}
     * @author cjs
     * @date 2021-07-17 13:33:34
     */
    async getCategoryList() {
      const res = await list();
      const arr = (res.data || []).map(item => {
        return {
          label: item.name,
          value: item.id
        };
      });
      this.$set(this.searchObj, "categoryId", arr);
    },
    /**
     * @name editRowFunc
     * @description 编辑行
     * @param {}
     * @author cjs
     * @date 2021-07-17 11:55:30
     */
    async editRowFunc(row) {
      this.editId = row.id;
      const res = await selectById({
        productId: row.id
      });
      for (let key in this.formData) {
        this.$set(this.formData, key, res.data[key]);
      }
      this.dialogVisible = true;
      await this.$nextTick();
      this.$refs.form_ref.clearValidate();
    },
    /**
     * @name deleteRowFunc
     * @description 删除行
     * @param {}
     * @author cjs
     * @date 2021-07-17 11:55:58
     */
    async deleteRowFunc(row) {
      const { id } = row;
      await this.confirmFunc({
        msg: "您确定要删除该分类吗？删除后，不可恢复"
      });
      await removeById({
        id
      });
      this.$message({
        type: "success",
        message: "删除成功"
      });
      this.handleCurrentChange(1);
    },
    /**
     * @name addProductFunc
     * @description 添加商品
     * @param {}
     * @author cjs
     * @date 2021-07-17 13:09:13
     */
    addProductFunc() {},
    /**
     * @name getAllData
     * @description 获取所有数据
     * @param {}
     * @author cjs
     * @date 2021-07-17 10:16:50
     */
    async getAllData() {
      this.getCategoryList();
      this.getTableData();
    },
    /**
     * @name getTableData
     * @description 获取列表数据
     * @param {}
     * @author cjs
     * @date 2021-07-17 10:17:04
     */
    async getTableData() {
      const obj = {
        ...this.oldSearchData,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      };
      const res = await page(obj);
      // eslint-disable-next-line
      let list = res.data.records || [];
      list.map((item, index) => {
        item.index = this.pageSize * (this.currentPage - 1) + index + 1;
        item.isNewTxt = item.isNew ? "是" : "否";
        item.statusTxt = item.status ? "是" : "否";
      });
      this.tableData = list;
      this.totalSize = res.data.total;
    },
    /**
     * @name saveFunc
     * @description 保存方法
     * @param {}
     * @author cjs
     * @date 2021-07-17 11:05:20
     */
    saveFunc() {
      this.$refs.form_ref.validate(async valid => {
        if (!valid) {
          return;
        }
        // eslint-disable-next-line
        let obj = {
          ...this.formData
        };
        let msg = "新增";
        if (this.editId) {
          obj.productId = this.editId;
          msg = "保存";
        }
        let res = null;
        if (this.editId) {
          res = await updateById(obj);
        } else {
          res = await saveProduct(obj);
        }
        this.$message({
          type: "success",
          message: `${msg}成功`
        });
        this.resetFunc();
        this.dialogVisible = false;
      });
    },
    /**
     * @name cancelFunc
     * @description 取消方法
     * @param {}
     * @author cjs
     * @date 2021-07-17 11:05:32
     */
    cancelFunc() {
      this.dialogVisible = false;
    },
    /**
     * @name handleCurrentChange
     * @description 切换页码
     * @param {}
     * @author cjs
     * @date 2021-07-17 10:15:54
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    /**
     * @name handleSizeChange
     * @description 切换每页展示条数
     * @param {}
     * @author cjs
     * @date 2021-07-17 10:16:24
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    /**
     * @name searchFunc
     * @description 查询方法
     * @param {}
     * @author cjs
     * @date 2021-07-17 10:14:58
     */
    searchFunc(searchData) {
      this.oldSearchData = {
        ...searchData
      };
      this.handleCurrentChange(1);
    },
    /**
     * @name resetFunc
     * @description 重置方法
     * @param {}
     * @author cjs
     * @date 2021-07-17 10:15:25
     */
    resetFunc() {
      this.searchData = {
        ...this.initSearchData
      };
      this.searchFunc(this.searchData);
    },
    /**
     * @name addFunc
     * @description 新增按钮点击
     * @param {}
     * @author cjs
     * @date 2021-07-17 09:37:39
     */
    async addFunc() {
      this.editId = null;
      this.formData = {
        ...this.initFormData
      };
      this.coldProductParameterDetail = [];
      this.dialogVisible = true;
      await this.$nextTick();
      this.$refs.form_ref.clearValidate();
    }
  }
};
</script>
<style lang="scss" scoped>
.table_wrap {
  padding: 10px 20px;
}
.icon-wrap {
  width: 100%;
  .icon-img {
    width: 100%;
  }
}
.remark-wrap {
  white-space: pre-wrap;
}
.parameter-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .parameter-item {
    width: 48%;
    height: 400px;
    border: 1px solid #e0e0e0;
    padding: 10px;
    overflow-y: auto;
  }
}
</style>
